import React, { useState, useEffect } from 'react';
import plcService from '../services/plcService';
import usePLCOperations from '../hooks/usePLCOperations';
import PLCVariableRow from './PLCVariableRow';
import { createDefaultVariable, isBooleanType } from '../utils/plcUtils';
import './PLCPanel.css';

export default function PLCPanel() {
  const [isConnected, setIsConnected] = useState(false);
  const [variables, setVariables] = useState([createDefaultVariable()]);
  const [readResults, setReadResults] = useState({});
  const [plcConfig, setPlcConfig] = useState(null);
  const [variableTypes, setVariableTypes] = useState({}); // 新增：存储变量类型信息

  // 使用共享的PLC操作Hook
  const { loading, error, handleRead, handleWrite, showNotification, setLoading, setError } = usePLCOperations();

  // 检查PLC连接状态和加载配置
  useEffect(() => {
    const initPLCPanel = async () => {
      try {
        // 加载PLC配置
        const config = await plcService.loadConfig();
        setPlcConfig(config);
        
        // 初始化变量列表
        if (config.variables && config.variables.length > 0) {
          const initialVariables = config.variables.map(v => ({ 
            name: v.description || '', // 变量名使用描述字段
            address: v.address || v.name, // 变量地址使用address字段，如果没有则使用name字段（向后兼容）
            value: '',
            description: v.description || ''
          }));
          
          // 存储变量类型信息
          const types = {};
          config.variables.forEach(v => {
            if (v.address) {
              types[v.address] = v.type || 'UNKNOWN';
            }
          });
          setVariableTypes(types);
          
          setVariables(initialVariables);
        }
        
        // 检查PLC连接状态
        const status = await plcService.getStatus();
        setIsConnected(status.connected);
      } catch (err) {
        console.error('初始化PLC面板失败:', err);
        setError('初始化PLC面板失败: ' + err.message);
      }
    };

    initPLCPanel();
    
    // 每5秒检查一次连接状态
    const interval = setInterval(async () => {
      try {
        const status = await plcService.getStatus();
        setIsConnected(status.connected);
        setError(null);
      } catch (err) {
        console.error('检查PLC状态失败:', err);
        setError('检查PLC状态失败: ' + err.message);
      }
    }, 5000);
    
    return () => clearInterval(interval);
  }, [setError]);

  // 连接PLC
  const handleConnect = async () => {
    setLoading(true);
    setError(null);
    try {
      // 使用配置文件中的连接参数
      const config = plcConfig ? plcConfig.connection : null;
      const result = await plcService.connect(config);
      setIsConnected(result.connected);
      if (result.connected) {
        showNotification('✅ PLC连接成功', 'success');
      } else {
        alert('❌ PLC连接失败');
      }
    } catch (err) {
      const errorMessage = err.message || '连接PLC时发生未知错误';
      setError('连接PLC失败: ' + errorMessage);
      alert('❌ 连接PLC时发生错误: ' + errorMessage);
    } finally {
      setLoading(false);
    }
  };

  // 断开PLC连接
  const handleDisconnect = async () => {
    setLoading(true);
    setError(null);
    try {
      await plcService.disconnect();
      setIsConnected(false);
      setReadResults({});
      showNotification('🔌 PLC连接已断开', 'info');
    } catch (err) {
      const errorMessage = err.message || '断开PLC连接时发生未知错误';
      setError('断开PLC连接失败: ' + errorMessage);
      alert('❌ 断开PLC连接时发生错误: ' + errorMessage);
    } finally {
      setLoading(false);
    }
  };

  // 添加变量行
  const addVariable = () => {
    const newVariables = [...variables, createDefaultVariable()];
    setVariables(newVariables);
    console.log('添加变量后，当前变量状态:', newVariables);
  };

  // 删除变量行
  const removeVariable = (index) => {
    if (variables.length <= 1) return;
    const newVariables = [...variables];
    newVariables.splice(index, 1);
    setVariables(newVariables);
    console.log('删除变量后，当前变量状态:', newVariables);
  };

  // 更新变量
  const updateVariable = (index, field, value) => {
    const newVariables = [...variables];
    newVariables[index][field] = value;
    setVariables(newVariables);
    console.log(`更新变量[${index}].${field}后，当前变量状态:`, newVariables);
  };

  // 设置三态选择框的值
  const handleTriStateChange = (index, value) => {
    updateVariable(index, 'value', value);
  };

  // 保存配置到文件
  const handleSaveConfig = async () => {
    setLoading(true);
    setError(null);
    try {
      // 构造配置对象
      const configToSave = {
        ...plcConfig,
        variables: variables.map(v => ({
          address: v.address,
          description: v.description || v.name,
          type: variableTypes[v.address] || 'UNKNOWN'
        }))
      };
      
      // 保存配置
      const result = await plcService.saveConfig(configToSave);
      
      if (result.success) {
        showNotification('✅ 配置保存成功', 'success');
      } else {
        throw new Error(result.message || '保存配置失败');
      }
    } catch (err) {
      const errorMessage = err.message || '保存配置时发生未知错误';
      setError('保存配置失败: ' + errorMessage);
      alert('❌ 保存配置时发生错误: ' + errorMessage);
    } finally {
      setLoading(false);
    }
  };

  // 另存为配置文件
  const handleSaveAsConfig = async () => {
    // 这里我们简单地保存到当前配置文件，因为在前端无法真正"另存为"到新文件
    // 在实际应用中，这可能需要后端支持或文件下载功能
    handleSaveConfig();
  };

  // 读取变量
  const handleReadVariables = async () => {
    setLoading(true);
    setError(null);
    try {
      // 使用当前界面中的变量列表
      const currentVariables = variables;
      
      // 过滤出有效的变量
      const validVariables = currentVariables.filter(v => v.address && v.address.trim() !== '');
      if (validVariables.length === 0) {
        alert('⚠️ 请先添加有效的变量地址');
        return;
      }
      
      console.log('🔄 正在读取变量...', validVariables);
      const result = await handleRead(currentVariables, false, null);
      
      if (result.success) {
        // 确保获取正确的变量值数据
        const valuesData = result.values || result.data?.values || result.data || {};
        
        // 更新界面中的变量值
        setReadResults(valuesData);
        
        showNotification(`✅ 成功读取 ${Object.keys(valuesData).length} 个变量`, 'success');
      }
    } catch (err) {
      alert('❌ ' + err.message);
    } finally {
      setLoading(false);
    }
  };

  // 写入变量
  const handleWriteVariables = async () => {
    try {
      const result = await handleWrite(variables, false, null);
      
      if (result.failCount > 0) {
        // 显示失败的变量信息
        const failedMessages = result.failedVariables.map(v => 
          `❌ ${v.name} 失败: ${v.error}`
        ).join('\n');
        alert(`⚠️ 成功写入 ${result.successCount}/${result.total} 个变量，${result.failCount} 个失败\n\n${failedMessages}`);
      } else if (result.successCount > 0) {
        showNotification(`✅ 成功写入 ${result.successCount}/${result.total} 个变量`, 'success');
      } else {
        showNotification('⚠️ 没有变量被成功写入', 'warning');
      }
    } catch (err) {
      alert('❌ ' + err.message);
    }
  };

  return (
    <div className="plc-panel">
      <h2>PLC基本控制面板</h2>
      
      {error && (
        <div className="error-message">
          <strong>错误:</strong> {error}
        </div>
      )}
      
      <div className="plc-controls">
        <button 
          onClick={handleConnect} 
          disabled={loading || isConnected}
          className={isConnected ? 'connected' : ''}
        >
          {loading ? '连接中...' : (isConnected ? '✅ 已连接' : '🔌 连接PLC')}
        </button>
        
        <button 
          onClick={handleDisconnect} 
          disabled={loading || !isConnected}
        >
          {loading ? '断开中...' : '🚫 断开PLC'}
        </button>
        
        <button 
          onClick={handleSaveConfig} 
          disabled={loading}
        >
          {loading ? '保存中...' : '💾 保存配置'}
        </button>
        
        <button 
          onClick={handleSaveAsConfig} 
          disabled={loading}
        >
          {loading ? '另存中...' : '💾 另存配置'}
        </button>
      </div>
      
      <div className="plc-variables">
        <h3>变量配置</h3>
        <table className="variables-table">
          <thead>
            <tr>
              <th>变量名</th>
              <th>变量地址</th>
              <th>设置值</th>
              <th>读取值(快照)</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {variables.map((variable, index) => (
              <PLCVariableRow
                key={index}
                variable={variable}
                index={index}
                onUpdate={updateVariable}
                onRemove={removeVariable}
                onTriStateChange={handleTriStateChange}
                showReadValue={true}
                readResults={readResults}
                variableTypes={variableTypes}
                isGroup={false}
                totalVariables={variables.length}
              />
            ))}
          </tbody>
        </table>
        
        <button onClick={addVariable} className="add-variable-btn">
          ➕ 添加变量
        </button>
      </div>
      
      <div className="plc-actions">
        <button onClick={handleReadVariables} disabled={loading || !isConnected}>
          {loading ? '读取中...' : '📥 读取变量'}
        </button>
        
        <button onClick={handleWriteVariables} disabled={loading || !isConnected}>
          {loading ? '写入中...' : '📤 写入变量'}
        </button>
      </div>
    </div>
  );
}
